<template>
  <el-dropdown v-if="permissionData.length > 0" split-button :type="type" trigger="click" @click="handleClick" @command="handleCommand">
    <div v-if="icon"><i :class="icon" />&nbsp;&nbsp;&nbsp;{{ name }}</div>
    <div v-else>{{ name }}</div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item
        v-for="(item, index) in permissionData"
        :key="index"
        :command="item.command"
      >
        {{ item.name }}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
// import store from '@/store'
// import router from '@/router'
export default {
  name: 'DropdownButton',
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    },
    icon: {
      type: String,
      default: ''
    },
    // 样式
    size: {
      type: String,
      default: 'mini'
    },
    type: {
      type: String,
      default: 'primary'
    }
  },
  data() {
    return {
      command: this.value,
      commandMap: {
        check: 'CHECK',
        checkNew: 'CHECK',
        uncheck: 'CHECK',
        collate: 'COLLATE',
        noCollate: 'COLLATE',
        ratify: 'RATIFY',
        noRatify: 'RATIFY',
        approval: 'APPROVAL',
        disapproval: 'APPROVAL',
        stop: 'STOP',
        unstop: 'STOP',
        stopBill: 'STOP',
        unStopBill: 'STOP',
        suspend: 'SUSPEND',
        unsuspend: 'SUSPEND',
        append: 'APPEND',
        noAppend: 'APPEND',
        print1: 'PRINT',
        print2: 'PRINT',
        print3: 'PRINT',
        send: 'SEND',
        cancel: 'SEND',
        sync: 'SYNC',
        add: 'ADD',
        purchaseQuickly: 'ADD',
        orderCopy: 'ADD',
        batchAddition: 'ADD',
        export: 'EXPORT',
        import: 'IMPORT',
        sets: 'SETS',
        cancels: 'CANCELS'
      }
    }
  },
  computed: {
    name: function() {
      const tmp = this.permissionData.find(item => item.command === this.command)
      if (tmp) {
        return tmp.name
      } else {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.command = this.permissionData[0].command
        return this.permissionData[0].name
      }
      // eslint-disable-next-line no-unreachable
      return ''
    },
    permissionData: function() {
    // const getPermissionOperations = store.getters && store.getters.getPermissionOperations
    // const operations = getPermissionOperations(router.currentRoute.name)
    // const pd = this.data.filter(d => operations.includes(this.commandMap[d.command]))
    // return pd
      return this.data
    }
  },
  created() {
    if (this.permissionData.length > 0) {
      this.command = this.permissionData[0].command
    }
  },
  methods: {
    handleClick() {
      this.$emit('click', this.command)
    },
    handleCommand(command) {
      this.command = command
      this.$emit('click', command)
    }
  }
}
</script>

<style scoped>
.el-dropdown{
  margin-right: 2px;
}
::v-deep .el-button-group .el-dropdown__caret-button {
  padding-left: 4px;
  padding-right: 5px;
}
::v-deep .el-button-group>.el-button:not(:last-child), .el-tabs--left .el-tabs__nav-wrap.is-left{
  margin-right: -2px;
}
</style>
